html,
body {
    height: 100%;
    width: 100%;
    display: flex;
}

header {
    height: 100%;
    width: 65%;
    background-color: #00a7f2;
    position: relative;
}

header img {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

#logbox {
    width: 35%;
    height: 100%;
    /* background-color: rebeccapurple; */
    position: relative;
}

/* 登录模态框 */
#loginModal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* border: 1px solid black; */
    padding: 35px 20px;
    width: 400px;
    height: 550px;
    background-color: #fff;
}

#loginModal>div:last-child {
    width: 210px;
    height: 58px;
}

#loginModal>#loginModalTab {
    display: flex;
    margin: 30px auto;
}

#loginModal>#loginModalTab i {
    height: 40px;
    line-height: 40px;
    color: var(--borderColor);
}

#loginModal>#loginModalTab li {
    width: 200px;
    height: 40px;
    line-height: 40px;
    text-align: center;
}

#loginModal>#loginModalTab li:hover {
    cursor: pointer;
}

#loginModal>#loginModalTab li.active {
    position: relative;
    color: var(--themeColor);
}

#loginModal>#loginModalTab li.active::after {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    display: block;
    content: "";
    width: 25%;
    height: 4px;
    background-color: var(--themeColor);
}

#loginModal>.loginCont {
    display: none;
}

#loginModal>.loginCont.on {
    display: block;
}

.loginCont input {
    width: 360px;
    height: 40px;
    border: 0;
    border-bottom: 2px solid #e7e7e7;
    left: 40px;
    outline: none ;
    margin-bottom: 20px;
}
.loginCont button {
    width: 360px;
    height: 40px;
    background-color: #00a7f2;
    color: #fff;
    border: 0;
    margin-top: 40px;
}